<template>
  <div id="hello">      
    <div class="tesyt">
      <el-row :gutter="20">
        <el-col :span="12"
          >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="查询的报告" prop="inputvalues">
            <el-input
              ref="demoInput"
              placeholder="请输入内容"
              v-model="ruleForm.inputvalues"
              style="width: 300px;" 
            >
            </el-input>
              
            </el-form-item>

            <el-form-item label="查询的字段" prop="selvalues">
              <el-input type="textarea"
              :autosize="{ minRows: 5, maxRows: 10 }"
              style="width: 300px;" 
              placeholder="请输入查询字段，已换行分隔"
              v-model="ruleForm.selvalues"> </el-input> 
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">查询字段</el-button>
              <el-button type="primary" @click="copyClicked">复制报告</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
            
        </el-col>

        <el-col :span="12"
          ><div class="grid-content bg-purple">
            </div
        ></el-col>
      </el-row>

      <h2 style="text-align: center">测试表</h2>

      <!-- 表格 -->
      <el-table
        :data="testDatas"
        border
        style="width: 100%; margin-top: 10px"
        @header-contextmenu="(column, event) => rightClick(null, column, event)"
        @row-contextmenu="rightClick"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          v-if="columnList.length > 0"
          type="index"
          label="编号"
          :width="50"
        >
          <!-- <template #default="scope">
          <el-table
            v-show="scope.row.children.length > 0"
            border
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            :data="scope.row.children"
            style="width:100%"
          >
            <el-table-column
              v-for="(col, idx) in scope.row.childrenname"
              :key="col.prop"
              :index="idx"
              :label="col.label"
              width="100px"
              ><template #default="scope">
                <p
                  v-show="scope.row[col.prop].show"
                  @dblclick="scope.row[col.prop].show = false"
                >
                  {{ scope.row[col.prop].content }}
                  <i
                    class="el-icon-edit-outline"
                    @click="scope.row[col.prop].show = false"
                  ></i>
                </p>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 2 }"
                  v-show="!scope.row[col.prop].show"
                  v-model="scope.row[col.prop].content"
                  @blur="scope.row[col.prop].show = true"
                >
                </el-input>
              </template>
              <template v-for="(item, index) in scope.row.childrenname">
              <el-table-column
                :key="index"
                :prop="item.prop"
                :label="item.label"
                width="180px"
              >
              </el-table-column>
            </template>
            </el-table-column>
          </el-table>
        </template> -->
        </el-table-column>
        <el-table-column
          v-for="(col, idx) in columnList"
          :key="col.prop"
          :index="idx"
          :label="col.label"
          width="150px"
        >
          <template #default="scope">
            <p
              v-show="scope.row[col.prop].show"
              @dblclick="scope.row[col.prop].show = false"
            >
              {{ scope.row[col.prop].content }}
              <i
                class="el-icon-edit-outline"
                @click="scope.row[col.prop].show = false"
              ></i>
            </p>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              v-show="!scope.row[col.prop].show"
              v-model="scope.row[col.prop].content"
              @blur="Update(scope.row[col.prop])"
            >
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align: left; color: #ccc">右键菜单，双击编辑</p>

      <div>
        <h3 style="text-align: center">实时数据展示</h3>
        <label>当前目标：</label>
        <p>{{ JSON.stringify(curTarget) }}</p>
        <label>表头：</label>
        <p v-for="col in columnList" :key="col.prop">
          {{ JSON.stringify(col) }}
        </p>
        <label>数据：</label>
        <ul>
          <li v-for="(data, idx) in testDatas" :key="idx">
            <p v-for="(key, idx1) in Object.keys(data)" :key="idx1">
              {{ key + ": " + JSON.stringify(data[key]) }}
            </p>
          </li>
        </ul>
      </div>

      <!-- 表头右键菜单 -->
      <div v-show="showMenu" id="contextmenu">
        <i
          class="el-icon-circle-close hideContextMenu"
          @click="showMenu = false"
        ></i>
        <el-button size="mini" type="primary" @click="addColumn()"
          >前方插入一列</el-button
        >
        <el-button size="mini" type="primary" @click="addColumn(true)"
          >后方插入一列</el-button
        >

        <el-button type="primary" size="mini" @click="delColumn()"
          >删除当前列</el-button
        >

        <div v-show="!curTarget.isHead">
          <hr />
          <el-button size="mini" type="primary" @click="addRow()"
            >上方插入一行</el-button
          >
          <el-button size="mini" type="primary" @click="addRow(true)"
            >下方插入一行</el-button
          >

          <el-button type="primary" size="mini" @click="addRow()"
            >删除当前行</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      ruleForm: {
        inputvalues:"",
        selvalues:"",

        },
        rules: {
          val: [
            { required: true, message: '请选择查询的DCN', trigger: 'change' }
        
          ],
          tables: [
            { required: true, message: '请选择查询的表', trigger: 'change' }
          ],
          inputvalues: [
            { required: true, message: '请输入报告内容', trigger: 'blur' }
          ],
          selvalues: [
            { required: true, message: '请输入要查询的字段', trigger: 'blur' }
          ],
        },
      inputvalues: "",
      selvalues: "",
      columnList: [],

      testDatas: [],

      count_col: 0,
      showMenu: false,
      curTarget: {
        // 当前目标信息
        rowIdx: null, // 行下标
        colIdx: null, // 列下标
        isHead: undefined // 当前目标是表头？
      }
    };
  },
  methods: {
    copyClicked() {
      this.$refs.demoInput.select();
      document.execCommand("copy");
      this.$message({
        message: "复制成功，直接粘贴即可",
        type: "success"
      });
    },
    rightClick(row, column, event) {
      // 阻止浏览器自带的右键菜单弹出
      event.preventDefault(); // window.event.returnValue = false
      if (column.index == null) return;
      // 定位菜单
      let ele = document.getElementById("contextmenu");
      ele.style.top = event.clientY - 25 + "px";
      ele.style.left = event.clientX - 25 + "px";
      if (window.innerWidth - 140 < event.clientX) {
        ele.style.left = "unset";
        ele.style.right = 0;
      }
      this.showMenu = true;
      // 当前目标
      this.curTarget = {
        rowIdx: row ? row.row_index : null,
        colIdx: column.index,
        isHead: !row
      };
    },
    // 新增行
    addRow(later) {
      this.showMenu = false;
      if (this.curTarget.rowIdx === null) return;
      const idx = later ? this.curTarget.rowIdx + 1 : this.curTarget.rowIdx;
      let obj = {};
      this.columnList.forEach(p => {
        obj[p.prop] = { content: "", show: true };
      });
      this.testDatas.splice(idx, 0, obj);
    },
    // 删除行
    delRow() {
      this.showMenu = false;
      this.curTarget.rowIdx !== null &&
        this.testDatas.splice(this.curTarget.rowIdx, 1);
    },
    // 新增列
    addColumn(later) {
      this.showMenu = false;
      const idx = later ? this.curTarget.colIdx + 1 : this.curTarget.colIdx;
      let obj = { prop: "col_" + ++this.count_col, label: "", show: true };
      this.columnList.splice(idx, 0, obj);
      this.testDatas.forEach(p => {
        // vue3无需 this.$set(p, obj.col, { content: '', show: true }) // vue2中, 新增的对象无法被监听到
        p[obj.prop] = { content: "", show: true };
      });
    },
    // 删除列
    delColumn() {
      this.showMenu = false;
      let colKey = this.columnList[this.curTarget.colIdx].prop;
      this.columnList.splice(this.curTarget.colIdx, 1);
      this.testDatas.forEach(p => delete p[colKey]);
    },
    // 添加表格行下标
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    Update(scop) {
      console.log(scop);
      scop.show = true;
      this.$http
        .post(
          "update",

          {
            data: {
              stra: scop.content,
              path: scop.path,
              repo: this.ruleForm.inputvalues
            }
          }
        )
        .then(res => {
          this.ruleForm.inputvalues = JSON.stringify(res.data);
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
                  this.$http.post(
                    "getreport",
                    {
                      data: {
                        stra: this.ruleForm.selvalues.toLowerCase(),
                        repo: this.ruleForm.inputvalues
                      }
                    }
                  )
                  .then(res => {
                    // alert("登录" + res.data.test);\
                    let vaa = JSON.parse(res.data.col);
                    this.columnList = vaa.columnList;
                    this.testDatas = vaa.testDatas;
                  })
                  .catch(err => {
                    console.log(err);
                  });
                      // console.log(this.ruleForm.models);           
                      // alert('submit!');
                    } else {
                      console.log('error submit!!');
                      return false;
                    }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    selected() {
      this.$http
        .post(
          "getreport",

          {
            data: {
              stra: this.ruleForm.selvalues.toLowerCase(),
              repo: this.ruleForm.inputvalues
            }
            // params: {

            // },
          }
        )
        .then(res => {
          // alert("登录" + res.data.test);\
          let vaa = JSON.parse(res.data.col);
          this.columnList = vaa.columnList;
          this.testDatas = vaa.testDatas;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="less" scoped>
#hello {
  position: relative;
  margin-left: 100px;
  .tesyt {
    margin-top: 20px;
  }
}
#contextmenu {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 120px;
  border-radius: 3px;
  border: 1px solid #999999;
  background-color: #f4f4f4;
  padding: 10px;
  z-index: 12;
  button {
    display: block;
    margin: 0 0 5px;
  }
}
.hideContextMenu {
  position: absolute;
  top: 5px;
  right: 5px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.bg-purple {
  background: #d3dce6;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
